<template>
  <el-col class="el-left-menu" :span="3">
    <el-menu background-color="#324157" text-color="#bfcbd9" :default-active="active" :active="active" class="el-menu-vertical-demo" router unique-opened>
      <div v-for="menuItem in routeList" :key="menuItem.id" >
        <el-submenu v-if="menuItem.childPermissions.length"  :index="menuItem.menuUrl">
          <template slot="title">
            <!-- <i :class="menuItem.icon"></i> -->
            <span>{{menuItem.menuName}}</span>
          </template>
          <el-menu-item v-for="item in menuItem.childPermissions" :key="item.menuName" :index="item.menuUrl">{{item.menuName}} </el-menu-item>
        </el-submenu>
        <el-menu-item v-if="!menuItem.childPermissions.length" :index="menuItem.menuUrl">
          <span slot="title">{{menuItem.menuName}}</span>
        </el-menu-item>
      </div>

    </el-menu>
  </el-col>
</template>


<script>
let CONSTANT = require("../../constant/constant.js"),
  common = require("../../common.js");
var routerList = require("./router-leftBar.js");
export default {
  data() {
    return {
      active: "",
      routeList: [],
      heightLength: ""
    };
  },
  created() {
    
    console.log(this.routerList,'ffffff')
    this.leftPermission();
    this.heightLength = document.body.scrollHeight;
  },
  mounted() {
    window.addEventListener("scroll", () => {
      let scrollHeight = document.body.scrollHeight;
      this.heightLength = scrollHeight;
    });
  },
  methods: {
    leftPermission() {
      let url = CONSTANT.URL.SYSTEM.FINDUSERPERMISSIONS;
      common.requestAjax(url, null, null, res => {
        this.routeList = res.data&&res.data.bussData?res.data.bussData:[];
        console.log(this.routeList,res.data.bussData)
        this.active = this.$router.currentRoute.path.split("/")[1] || "/";
      });
    },
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {}
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
.el-left-menu {
  height: 100%!important;
  position: fixed;
  left: 0;
  width: 186px;
  overflow-y: auto;
  background-color: rgb(50, 65, 87);
  &::-webkit-scrollbar {
    width: 5px;
    height: 14px;
  }

  &::-webkit-scrollbar-track,
  &::-webkit-scrollbar-thumb {
    border: 1px solid transparent;
  }

  &::-webkit-scrollbar-track {
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
  }

  &::-webkit-scrollbar-thumb {
    min-height: 20px;
    background-clip: content-box;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }
}
.el-menu-vertical-demo {
  height: 100%;
}

.el-menu-item {
  min-width: auto !important;
}
.el-menu-item-group__title {
  padding-top: 0px !important;
}
.el-menu{
  div{
    &:last-child{
       padding-bottom: 50px;
      li.el-submenu{
        padding-bottom: 50px;
      }
    }
  }
}
.el-menu-item {
  a {
    display: block;
    color: #bfcbd9;
  }
  &.is-active {
    a {
      color: #21b5cc;
    }
  }
}
</style>
